<template>
  <div class="main">
    <h1 @click="moreBrand">
      品牌制造商直供
      <i-icon type="enterinto" size="20" color="#80848f"/>
    </h1>
    <div class="box">
      <i-row>
          <i-col
            span="12"
            i-class="col-class"
            :key="index"
            v-for="(brand, index) in brandList">
            <div class="content" @click="brandDetail(brand.id)">
              <img mode="aspectFill" :src="brand.new_pic_url">
              <div class="text">
                <span>{{brand.name}}</span>
                <em>{{brand.floor_price}}元起</em>
                <img mode="aspectFill" src="../../../static/img/new.png">
              </div>
            </div>
          </i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ['brandList'],
  methods: {
    brandDetail (id) {
      wx.navigateTo({
        url: `/pages/brand/main?id=${id}`
      })
    },
    moreBrand () {
      wx.navigateTo({
        url: '/pages/moreBrand/main'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  background: #fff;
  h1{
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 47px;
  }
  .box{
    padding: 3px;
    .content{
      height: 120px;
      padding: 3px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      .text{
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px;
        span{
          font-size: 16px;
        }
        em{
          font-size: 14px;
        }
        img{
          margin-top: 5px;
          width: 64rpx;
          height: 32rpx;
        }
      }
    }
  }
}
</style>
